<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一视角智能安全帽监控驾驶舱</title>
    <link rel="stylesheet" href="styles.css">
    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700&display=swap" rel="stylesheet">
    <script src="ZLMRTCClient.js"></script>
</head>
<body>
    <!-- 视频监控背景 -->
    <div id="videoBackground" class="video-background">
    <video id="videoStream" autoplay muted playsinline loop></video>
    <div class="video-overlay">
            <!-- 扫描线效果 -->
            <div class="scan-line"></div>
            <!-- 网格背景 -->
            <div class="grid-overlay"></div>
            <!-- 粒子效果 -->
            <div class="particles"></div>
        </div>
    </div>
    <img src="ic_bg.png" class="bg-overlay" alt="Background" width="100%" height="100%" />

    <!-- 主容器 - 透明悬浮 -->
    <div class="container">
        <!-- 顶部信息栏 -->
        <header class="header">
            <div class="header-left">
                <h1>CYBER HELMET OS</h1>
                <div class="header-subtitle">第一视角智能安全帽监控驾驶舱</div>
            </div>
            <div class="header-right">
                <span id="currentTime" class="time-display">00:00:00</span>
                <span id="connectionStatus" class="status-display">CONNECTING...</span>
            </div>
        </header>

        <!-- 主要内容区域 -->
        <main class="main-content">
            <!-- 导航模块 -->
            <nav class="navigation">
                <ul class="nav-tabs">
                    <li class="nav-item active" data-tab="device-info">
                        <span>设备信息</span>
                    </li>
                    <li class="nav-item" data-tab="device-control">
                        <span>设备控制</span>
                    </li>
                    <li class="nav-item" data-tab="ai-recognition">
                        <span>AI识别</span>
                    </li>
                    <li class="nav-item" data-tab="vital-gas">
                        <span>体征和气体</span>
                    </li>
                </ul>
            </nav>

            <!-- 内容区域 -->
            <section class="content-section">
                <!-- 设备信息模块 -->
                <div class="tab-content active" id="device-info-content">
                    <div class="module-grid">
                        <div class="module-card">
                            <h3>基础信息</h3>
                            <div class="info-item">
                                <span class="info-label">设备编号：</span>
                                <span class="info-value" id="deviceId">SH-20250926</span>
                            </div>
                            <div class="info-item">
                                <span class="info-label">剩余电量：</span>
                                <span class="info-value" id="batteryLevel">85%</span>
                            </div>
                            <div class="info-item">
                                <span class="info-label">网络信号：</span>
                                <span class="info-value" id="networkSignal">良好</span>
                            </div>
                            <div class="info-item">
                                <span class="info-label">在线状态：</span>
                                <span class="info-value" id="onlineStatus">在线</span>
                            </div>
                        </div>

                        <div class="module-card">
                            <h3>媒体信息</h3>
                            <div class="info-item">
                                <span class="info-label">媒体状态：</span>
                                <span class="info-value" id="mediaStatus">监控中</span>
                            </div>
                            <div class="info-item">
                                <span class="info-label">视频数量：</span>
                                <span class="info-value" id="videoCount">12</span>
                            </div>
                            <div class="info-item">
                                <span class="info-label">图片数量：</span>
                                <span class="info-value" id="imageCount">24</span>
                            </div>
                            <div class="info-item">
                                <span class="info-label">报警数量：</span>
                                <span class="info-value" id="alarmCount">0</span>
                            </div>
                        </div>

                        <div class="module-card">
                            <h3>定位信息</h3>
                            <div class="info-item">
                                <span class="info-label">定位类型：</span>
                                <span class="info-value" id="locationType">GPS</span>
                            </div>
                            <div class="info-item">
                                <span class="info-label">搜星数量：</span>
                                <span class="info-value" id="satelliteCount">12</span>
                            </div>
                            <div class="info-item">
                                <span class="info-label">定位精度：</span>
                                <span class="info-value" id="locationAccuracy">1.2m</span>
                            </div>
                            <div class="info-item">
                                <span class="info-label">当前位置：</span>
                                <span class="info-value" id="currentLocation">北京市朝阳区xxx街道</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 设备控制模块 -->
                <div class="tab-content" id="device-control-content">
                    <div class="module-grid">
                        <div class="module-card">
                            <h3>按键控制</h3>
                            <div class="control-grid">
                                <button class="control-btn" data-action="powerOpen">开机</button>
                                <button class="control-btn" data-action="powerClose">关机</button>
                                <button class="control-btn" data-action="recordOpen">开启录像</button>
                                <button class="control-btn" data-action="recordClose">关闭录像</button>
                                <button class="control-btn" data-action="flashlightOpen">打开手电筒</button>
                                <button class="control-btn" data-action="flashlightClose">关闭手电筒</button>
                                <button class="control-btn" data-action="laserOpen">打开激光灯</button>
                                <button class="control-btn" data-action="laserClose">关闭激光灯</button>
                                <button class="control-btn" data-action="volumeUp">音量加</button>
                                <button class="control-btn" data-action="volumeDown">音量减</button>
                                <button class="control-btn" data-action="photo">拍照</button>
                                <button class="control-btn" data-action="sos">SOS</button>
                                <button class="control-btn" id="intercomBtn" data-action="intercom">按住说话</button>
                            </div>
                        </div>

                        <div class="module-card">
                            <h3>模块开关</h3>
                            <div class="switch-grid">
                                <div class="switch-item">
                                    <span>体征开关</span>
                                    <label class="switch">
                                        <input type="checkbox" checked>
                                        <span class="slider"></span>
                                    </label>
                                </div>
                                <div class="switch-item">
                                    <span>近电开关</span>
                                    <label class="switch">
                                        <input type="checkbox" checked>
                                        <span class="slider"></span>
                                    </label>
                                </div>
                                <div class="switch-item">
                                    <span>气压开关</span>
                                    <label class="switch">
                                        <input type="checkbox">
                                        <span class="slider"></span>
                                    </label>
                                </div>
                                <div class="switch-item">
                                    <span>气体开关</span>
                                    <label class="switch">
                                        <input type="checkbox" checked>
                                        <span class="slider"></span>
                                    </label>
                                </div>
                            </div>
                        </div>

                        <div class="module-card">
                            <h3>语音开关</h3>
                            <div class="switch-grid">
                                <div class="switch-item">
                                    <span>脱帽报警</span>
                                    <label class="switch">
                                        <input type="checkbox" checked>
                                        <span class="slider"></span>
                                    </label>
                                </div>
                                <div class="switch-item">
                                    <span>温度报警</span>
                                    <label class="switch">
                                        <input type="checkbox" checked>
                                        <span class="slider"></span>
                                    </label>
                                </div>
                                <div class="switch-item">
                                    <span>跌落报警</span>
                                    <label class="switch">
                                        <input type="checkbox" checked>
                                        <span class="slider"></span>
                                    </label>
                                </div>
                                <div class="switch-item">
                                    <span>撞击报警</span>
                                    <label class="switch">
                                        <input type="checkbox" checked>
                                        <span class="slider"></span>
                                    </label>
                                </div>
                                <div class="switch-item">
                                    <span>静默报警</span>
                                    <label class="switch">
                                        <input type="checkbox">
                                        <span class="slider"></span>
                                    </label>
                                </div>
                                <div class="switch-item">
                                    <span>近电报警</span>
                                    <label class="switch">
                                        <input type="checkbox" checked>
                                        <span class="slider"></span>
                                    </label>
                                </div>
                                <div class="switch-item">
                                    <span>高度报警</span>
                                    <label class="switch">
                                        <input type="checkbox">
                                        <span class="slider"></span>
                                    </label>
                                </div>
                                <div class="switch-item">
                                    <span>低电报警</span>
                                    <label class="switch">
                                        <input type="checkbox" checked>
                                        <span class="slider"></span>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- AI识别模块 -->
                <div class="tab-content" id="ai-recognition-content">
                    <div class="module-grid">
                        <div class="module-card">
                            <h3>语音控制</h3>
                            <div class="ai-control">
                                <button class="ai-btn" id="voiceControl">语音指令</button>
                                <div class="voice-command-status">
                                    <span>状态: <span id="voiceStatus">待命中</span></span>
                                </div>
                            </div>
                        </div>

                        <div class="module-card">
                            <h3>AI图片结构化</h3>
                            <div class="ai-control">
                                <button class="ai-btn" id="aiImageProcess">图片识别</button>
                                <div class="ai-result">
                                    <span>识别结果: <span id="imageResult">无</span></span>
                                </div>
                            </div>
                        </div>

                        <div class="module-card">
                            <h3>DeepSeek智能对话</h3>
                            <div class="ai-chat">
                                <div class="chat-history" id="chatHistory">
                                    <div class="message system">系统：欢迎使用DeepSeek智能对话</div>
                                </div>
                                <div class="chat-input">
                                    <input type="text" id="chatInput" placeholder="输入您的问题...">
                                    <button id="sendChat">发送</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 体征和气体模块 -->
                <div class="tab-content" id="vital-gas-content">
                    <div class="module-grid">
                        <div class="module-card">
                            <h3>体征数据</h3>
                            <div class="data-display">
                                <div class="data-item">
                                    <span class="data-label">心率:</span>
                                    <span class="data-value" id="heartRate">72 bpm</span>
                                </div>
                                <div class="data-item">
                                    <span class="data-label">体温:</span>
                                    <span class="data-value" id="bodyTemp">36.5 °C</span>
                                </div>
                                <div class="data-item">
                                    <span class="data-label">血压:</span>
                                    <span class="data-value" id="bloodPressure">120/80 mmHg</span>
                                </div>
                                <div class="data-item">
                                    <span class="data-label">血氧:</span>
                                    <span class="data-value" id="oxygenSaturation">98%</span>
                                </div>
                            </div>
                        </div>

                        <div class="module-card">
                            <h3>气体数据</h3>
                            <div class="data-display">
                                <div class="data-item">
                                    <span class="data-label">氧气:</span>
                                    <span class="data-value" id="oxygenGas">20.9%</span>
                                </div>
                                <div class="data-item">
                                    <span class="data-label">一氧化碳:</span>
                                    <span class="data-value" id="carbonMonoxide">0.5 ppm</span>
                                </div>
                                <div class="data-item">
                                    <span class="data-label">硫化氢:</span>
                                    <span class="data-value" id="hydrogenSulfide">0.1 ppm</span>
                                </div>
                                <div class="data-item">
                                    <span class="data-label">甲烷:</span>
                                    <span class="data-value" id="methane">1.2 ppm</span>
                                </div>
                            </div>
                        </div>

                        <div class="module-card">
                            <h3>环境数据</h3>
                            <div class="data-display">
                                <div class="data-item">
                                    <span class="data-label">温度:</span>
                                    <span class="data-value" id="environmentTemp">25.3 °C</span>
                                </div>
                                <div class="data-item">
                                    <span class="data-label">气压:</span>
                                    <span class="data-value" id="pressure">101.3 kPa</span>
                                </div>
                                <div class="data-item">
                                    <span class="data-label">海拔:</span>
                                    <span class="data-value" id="altitude">101.3 m</span>
                                </div>
                                <div class="data-item">
                                    <span class="data-label">相对高度:</span>
                                    <span class="data-value" id=">relativeHeight">10.3 m</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </main>
    </div>

    <script src="script.js"></script>
</body>
</html>